<template>
  <div class="tab-nav">
    <van-tabbar route>
      <van-tabbar-item icon="home-o" v-for="(item, key) in tabItem" :key="key" :name="item.name" :to="item.to">
        <span>{{ item.text }}</span>
        <template #icon="props">
          <img :src="props.active ? item.icon.active : item.icon.inactive" alt="" />
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script lang="ts">
import { Component } from "vue-property-decorator";
import { Tabbar, TabbarItem } from "vant";
import Bpm from "@/api/bpm";
import Base from "@/utils/base";

@Component({
  name: "TabBar",
  components: {
    VanTabbar: Tabbar,
    VanTabbarItem: TabbarItem
  }
})
export default class TabBar extends Base {
  private bpmCode = "";
  private tabItem: any[] = [];

  private async created() {
    await this.getBpmValidityTime();
    this.tabItem = [
      {
        text: "首页",
        to: { name: "Home" },
        name: "home",
        icon: {
          active: require("@/assets/images/tabbar-1.png"),
          inactive: require("@/assets/images/tabbar-0.png")
        }
      },
      {
        text: "我的流程",
        to: { name: "MiddlePage", query: { redirect: encodeURIComponent(this.unfinshedWorkLink) } },
        icon: {
          active: require("@/assets/images/tabbar-7.png"),
          inactive: require("@/assets/images/tabbar-6.png")
        }
      },
      {
        text: "我的项目",
        to: { name: "MyProjects" },
        name: "myProjects",
        icon: {
          active: require("@/assets/images/tabbar-3.png"),
          inactive: require("@/assets/images/tabbar-2.png")
        }
      },
      {
        text: "个人中心",
        to: { name: "PersonalIndex" },
        name: "personalIndex",
        icon: {
          active: require("@/assets/images/tabbar-5.png"),
          inactive: require("@/assets/images/tabbar-4.png")
        }
      }
    ];
  }

  private async getBpmValidityTime() {
    const res: any = await Bpm.GetBpmValidityTime();
    if (res && res.state == 200) {
      this.bpmCode = res.data;
    }
    return res;
  }

  private get unfinshedWorkLink() {
    const _return = `${this.$config.bpmUri}/Portal/MobileRun.html?date=${this.bpmCode}&code=${this.currentUser.jobNo}&flag=5`;
    localStorage.setItem("unfinshedWorkLink", _return);
    return _return;
  }
}
</script>

<style lang="less" scoped>
.tab-nav {
  height: 50px;

  ul {
    display: flex;
    justify-content: space-between;

    li {
      height: 100%;
      background: red;
      text-align: center;
    }
  }
  .van-tabbar-item {
    color: #92929d;
    font-size: 10px;
  }
  .van-tabbar-item--active {
    color: #62a7fb;
  }

  .van-tabbar-item__icon img {
    width: 24px;
    height: 24px;
  }
}
</style>
